<template>
  <div class="register-container" ref="vantaRef" style="width: 100%; height: 100vh">
    <div class="register-bg-warp">
      <div class="register-form-warp">
        <div class="register-form">
          <div class="welcome-title">重 置 密 码</div>
          <el-form :model="pass" :rules="rules" ref="userFormInst">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" size="medium" prefix-icon="el-icon-user" v-model="pass.username" style="margin: 0 0 10px 0"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input size="medium" prefix-icon="el-icon-lock" placeholder="请输入绑定手机号" v-model="pass.phone" style="margin: 0 0 12px 0"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-register" type="primary" size="medium" autocomplete="off"  @click="passwordBack">重置密码</el-button>
            </el-form-item>
            <div>
            <div  class="allow-warp" style="margin: 10px 0;color:#ffffff;font-size: 14px">
                以上途径无法重置密码请联系管理员重置。
            </div>
          </div>
            <el-form-item>
              <div class="other-warp">
                <div @click="$router.push('/login')">返回登录</div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { projectName } from '../../config/config.default'
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'//导入动态样式逻辑


export default {
  name: 'ResetPassword',
  data() {
    return {
      pass:{},
      username:'',
      phone:'',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
       phone: [
          { required: true, message: '请正确输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请正确输入手机号', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 0xff0000,
      color2: 0xd1ff,
      speedLimit: 4.00,
      backgroundColor: 0x2F54EB
    })
  },
  methods: {
    passwordBack() {
      this.request.put('/user/reset', this.pass).then((res) => {
        if (res.code === '200') {
          this.$message.success('重置密码成功，新密码为：123456，请尽快修改密码')
          this.dialogFormVisible = false
        } else if(!this.username.trim()||!this.phone.trim()){
          this.$message.error("请输入用户名和手机号")
        }
      })
    }
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>

<style scoped lang="scss">
.register-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  .register-bg-warp {
    width: 100%;
    /* background: url('../assets/login.png') no-repeat;*/
    background-size: cover;
  }
  .register-form-warp {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px ;
    .register-form {

      width: 450px;
      // border: #4084d9 1px solid;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
      // background: url('../assets/login.png');
      padding: 25px;
      box-shadow:0 6px 20px 8px rgba(0,0,0,0.2);
      .welcome-title {
        font-size: 24px;
        margin-bottom: 30px;
        color: #f5f5f5;
        text-align: center;
      }
      .verify-code-form-item {
        display: flex;
        align-items: center;
      }
      .allow-warp {
        color: #366ef4;
        display: flex;
        align-items: center;
        font-size: 12px;
      }
      .btn-register {
        width: 100%;
      }
      .other-warp {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #366ef4;
        cursor: pointer;
      }
    }
  }
}
</style>
